﻿<div class="layui-card" id="lg-FormList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>管理员</div>
    <div class="layui-card-body" id="">
        <div class="lg-form-box">
            <table class="layui-hide" id="FormList" lay-filter="FormList"></table>
        </div>
        <!-- 内容主体区域结束 -->
    </div>
</div>
<script type="text/html" id="formListToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="fa fa-plus fa-fw"></i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
        <button class="layui-btn layui-btn-sm" lay-event="base"><i class="fa fa-bars fa-fw"></i>母版</button>
    </div>
</script>
<script type="text/html" id="btTpl">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" title="编辑"><span class="fa fa-pencil-square-o fa-fw "></span></a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="del" title="删除"><span class="fa fa-trash-o fa-fw"></span></a>
</script>
<script>
var page = frame.createPage({
    mounted: function() {
        var page = this;
        page.vm = Vue.createApp({
            mounted: function() {
                layui.use(['table', 'element', 'form'], function() {
                    var table = layui.table;
                    var form = layui.form;
                    form.render();
                    page.laytable = table.render({
                        elem: '#FormList'
                        , url: '/Api/sys/apply/GetFormList'
                        , toolbar: '#formListToolbar' //开启头部工具栏，并为其绑定左侧模板
                        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        , cols: [[
                            { type: 'checkbox' }
                            , {
                                field: 'Id', title: '序号', width: 80, templet: function(d) {
                                    return d.LAY_TABLE_INDEX + 1;
                                }
                            }
                            , { field: 'Title', title: '表单名称' }
                            , { field: 'Intro', title: '描述' }
                            , { field: 'AddTime', title: '添加时间' }
                            , {
                                field: 'IsDefault', title: '默认', width: 90, templet: function(d) {
                                    return laySwitch.render(d.IsDefault, 'default');
                                }
                            }
                            , {
                                field: 'IsUsing', title: '状态', width: 90, templet: function(d) {
                                    return laySwitch.render(d.IsUsing, 'use');
                                }
                            }
                            , { field: 'AddTime', title: '添加时间' }
                            , { fixed: 'right', title: '操作', width: 160, toolbar: '#btTpl' }
                        ]]
                        , page: true
                    });
                    table.on('toolbar(FormList)', function(obj) {
                        var checkStatus = table.checkStatus(obj.config.id);
                        switch (obj.event) {
                            case 'add':
                                frame.NavigateTo({
                                    url: "/lgm/Apply/Form/add/",
                                    title: "添加年级"
                                })
                                break;
                            case 'refresh':
                                page.laytable.reload();
                                break;
                            case 'base':
                                frame.NavigateTo({
                                    url: "/lgm/Apply/Form/base",
                                    title: "母版管理"
                                })
                        };
                    })
                    table.on('tool(FormList)', function(obj) {
                        var data = obj.data;
                        switch (obj.event) {
                            case 'use':
                                laySwitch.do({
                                    obj: obj,
                                    key: "IsUsing",
                                    url: "/Api/sys/apply/EditForm",
                                    refresh: function() {
                                        page.laytable.reload();
                                    }
                                })
                                break;
                            case 'default':
                                laySwitch.do({
                                    obj: obj,
                                    key: "IsDefault",
                                    url: "/Api/sys/apply/EditForm",
                                    refresh: function() {
                                        page.laytable.reload();
                                    }
                                })
                                break;
                            case 'edit':
                                frame.NavigateTo({
                                    url: "/lgm/apply/Form/Edit/" + data.Id,
                                    title: "编辑表单"
                                })
                                break;
                            case 'del':
                                layer.confirm('真的删除行么', function(index) {
                                    lg.request({
                                        url: "/Api/sys/apply/deleteForm",
                                        method: "post",
                                        data: { id: data.Id },
                                        success: res => {
                                            if (res.code == 0) {
                                                obj.del();
                                            }
                                        }
                                    })
                                    layer.close(index);
                                });
                                break;
                        };
                    })
                });
            }
        }).mount("#lg-FormList")
    }
}).mount();


</script>